<template>
  <div>
    <h1>store中的count:{{ count }}</h1>
    <h1>store中的num:{{ num }}</h1>
    <!-- 方式一： -->
    <h1>count平方{{ $store.getters.countSqrt }}</h1>
    <!-- 方式二： -->
    <h1>count平方{{ countSqrt }}</h1>
    <!-- 方式三 -->
    <h1>count平方{{ countSqrt }}</h1>

    <button @click="increase">+1</button>
    <button @click="increaseN({ n: 3 })">+n</button>

    <button @click="increaseNWait({ n: 20 })">过一秒+ n</button>
  </div>
</template>

<script>
  import { mapMutations, mapState, mapActions, mapGetters } from "vuex";
  export default {
    name: "Item",
    computed: {
      ...mapState(["count", "num"]),
      ...mapGetters(["countSqrt"]),
      countSqrt() {
        return this.$store.getters.countSqrt;
      },
    },
    methods: {
      ...mapMutations(["increase", "increaseN"]),
      ...mapActions(["increaseWait", "increaseNWait"]),
    },
  };
</script>

<style></style>
